<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/cmui.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">条件选择列表</h1>
		</header>
		<div class="mui-content">
			
			<div class="cmui-table-selectBox" style="margin-top: 20px;">
				<ul class="cmui-table-select">
			    	<li class="cmui-table-option" data-options="类型1,类型2,类型3" data-callback="testClick">
			    		<a>
			    			<span>分类</span>
			    			<span class="mui-icon mui-icon-arrowdown"></span>
			    		</a>
			    	</li>
			    	<li class="cmui-table-option" data-options="升序,降序" data-callback="testClick">
			    		<a>
			    			<span>排序</span>
			    			<span class="mui-icon mui-icon-arrowdown"></span>
			    		</a>
			    	</li>
			    	<li class="cmui-table-option" data-options="筛选1,筛选2" data-callback="testClick">
			    		<a>
			    			<span>筛选</span>
			    			<span class="mui-icon mui-icon-arrowdown"></span>
			    		</a>
			    	</li>
		    	</ul>
		    	<div id="cmui-table-selectFoot"></div>
			</div>
			
			<div style="height: 300px;">
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
				<p>测试内容测试内容测试内容测试内容测试内容测试内容</p>
			</div>
		</div>
		<script src="../js/jquery-3.1.1.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/cmui.js"></script>
		<script type="text/javascript">
			mui.init();
			
			//初始化cmui组件
			cmui.init();
			//选择条件弹出层点击事件回掉
			function testClick(val){
				alert(val);
			}
			
		</script>
	</body>

</html>